require(['./config'], () => {
  require(['jquery', 'artTemplate', 'loadHeaderFooter', 'jquery.cookie'], ($, template) => {
    $(() => {

      const url = "http://www.xiongmaoyouxuan.com/api/tab/1/feeds";
      // 发起 ajax 请求
      let startIndex = 0;
      (function () {


        $.ajax({
          url,
          method: "GET",
          data: {
            start: 20,
            sort: 0,
          },
          success(data) {
            console.log("请求成功：", data);
            // 修改 startIndex 值
            startIndex = data.data.nextIndex;
            // 遍历数组中每个元素，生成对应的布局 li 结构
            const html = template('temp', { products: data.data.list })

            // 在 ul 内部显示 li 节点
            $(".rongqi").append(html);
            // $('.products').html(html)
          },
        });
      })()

      // 为每个商品项绑定点击事件，跳转到详情页面
      // 利用编程式的导航实现页面跳转
      $('.rongqi').on('click', 'li', e => {
        const id = $(e.currentTarget).data('id')

        location.href = '/html/detail.html?id=' + id
      })
      //给加入购物车添加绑定事件
      $('.rongqi').on('click', '.add-to-cart', e => {
        //阻止事件传播

        e.stopPropagation()
        //解构赋值当前商品对象信息
        const { id, title, price, image, store } = $(e.currentTarget).parents('li').data('prod')

        //构建当前选购商品需要保存的对象信息
        const currentProduct = {
          id,
          title,
          price,
          image,
          store,
          amount: 1
        }
        console.log(currentProduct);

        //从本地存储中读取保存的购物车数组，如果没有，则创建空数组
        // localStorage.setItem.cart = JSON.stringify([currentProduct])
        const cart = JSON.parse(localStorage.getItem('cart')) || []

        //查找当前商品id，不存在index则为-1，存在则保存id

        const index = cart.findIndex(prod => prod.id === currentProduct.id)
        //通过index的值，判断在购物车中是否已保存当前选购的商品信息
        //如果存在，则说明之前已经选购过，则叠加数量即可
        //如果不存在，则添加到数组中
        if (index !== -1) {//查找当前商品id，不存在index则为-1，存在则保存id
          cart[index].amount += 1
        } else {
          cart.push(currentProduct)
        }
        // 将数组保存到 cookie 中，因为 cookie 中保存的是文本字符串
        // 的数据，所以将 cart 数组使用 JSON.stringify() 序列化（转换为JSON字符串）
        // $.cookie('cart', JSON.stringify(cart), {expires: 7})

        // 保存到 localStorage 中
        localStorage.setItem('cart', JSON.stringify(cart))
      })
      //通过点击实现跳转购物车
      $('.car').on('click', () => {
        location.href = '/html/cart.html'
      })


      // 定义变量，用于存储查询数据的起始索引



      $(".btn").on("click", () => {
        // 加载熊猫优选接口推荐商品的数据
        // url
        const url = "http://www.xiongmaoyouxuan.com/api/tab/1/feeds";
        // 发起 ajax 请求
        $.ajax({
          url,
          method: "GET",
          data: {
            start: startIndex,
            sort: 0,
          },
          success(data) {
            console.log("请求成功：", data);
            // 修改 startIndex 值
            startIndex = data.data.nextIndex;
            // 遍历数组中每个元素，生成对应的布局 li 结构
            const html = template('temp', { products: data.data.list })

            // 在 ul 内部显示 li 节点
            $(".rongqi").append(html);
            // $('.products').html(html)
          },
        });
      });


    });
    $('.uli').on('click', e => {
      for (var j = 0; j < $('.uli').length; j++) {
        $('.uli')[j].className = "uli";

      }
      e.target.classList.add('active')
    })
    //点击回首页
    $('.uli1').on('click', () => {
      $('.banner').css('display', 'block')
      $('.jingxuan').css('display', 'block')
      $('.rongqi').html('')


      //记录索引
      let startIndex = 0;
      const url = "http://www.xiongmaoyouxuan.com/api/tab/1/feeds";
      // 发起 ajax 请求
      $.ajax({
        url,
        method: "GET",
        data: {
          start: startIndex,
          sort: 0,
        },
        success(data) {
          console.log("请求成功：", data);
          // 修改 startIndex 值
          startIndex = data.data.nextIndex;
          // 遍历数组中每个元素，生成对应的布局 li 结构
          const html = template('temp', { products: data.data.list })

          // 在 ul 内部显示 li 节点
          $(".rongqi").append(html);
          // $('.products').html(html)
        },
      });

    })
    //9块9专区导航
    function aj() {
      const url = 'http://www.xiongmaoyouxuan.com/api/column/29'
      $.ajax({
        url,
        method: 'GET',
        success(data) {

          console.log(data);
          //添加标题

          const p = `<div data-v-4e25cb94="" class="banner-title w">${data.data.name}</div>`

          const ol = `<div class="sub w"><ol class=" w ols"> </ol></div>`

          const ols1 = data.data.subColumns.map((prod) => {
            const li = `<li data-v-f8438a40="" class="">
               ${prod.name}
            </li>`;
            return li
          })

          // console.log('哈哈', $('zhuanqu'))
          $('.banner').css('display', 'none')
          $('.jingxuan').css('display', 'none')
          $('.rongqi').html('')
          $('.rongqi').append(p)
          $('.rongqi').append(ol)
          console.log(data);


          $(".ols").append(ols1);
        }
      })


    }
    //大额抢券导航
    function aj1() {
      const url = 'http://www.xiongmaoyouxuan.com/api/column/170'
      $.ajax({
        url,
        method: 'GET',
        success(data) {
          console.log(data);
          //添加标题
          const p = `<div data-v-4e25cb94="" class="banner-title w">${data.data.name}</div>`
          const ul = `<ul class="w products yangshi"></ul>`
          const ol = `<div class="sub w"><ol class=" w ols"> </ol></div>`

          const html = data.data.subColumns.map((prod) => {
            const li = `<li data-v-f8438a40="" class="">
               ${prod.name}
            </li>`;
            return li
          })
          $('.banner').css('display', 'none')
          $('.jingxuan').css('display', 'none')
          $('.rongqi').html('')


          $('.rongqi').append(p)
          $('.rongqi').append(ol)
          $('.rongqi').append(ul)

          $(".ols").append(html);
        }
      })

    }
    //女装上新

    function aj2() {

      const url = 'http://www.xiongmaoyouxuan.com/api/column/3183'
      $.ajax({
        url,
        method: 'GET',
        success(data) {
          console.log(data);
          //添加标题
          const p = `<div data-v-4e25cb94="" class="banner-title w">${data.data.name}</div>`
          const ul = `<ul class="w products yangshi"></ul>`

          $('.banner').css('display', 'none')
          $('.jingxuan').css('display', 'none')
          $('.rongqi').html('')


          $('.rongqi').append(p)

          $('.rongqi').append(ul)


        }
      })
    }
    //9块9专区
    $('.uli2').on('click', () => {
      console.log($('.uli2'));
      aj()
      let startIndex = 0;
      const url = "http://www.xiongmaoyouxuan.com/api/sub_column/7/items";
      // 发起 ajax 请求
      $.ajax({
        url,
        method: "GET",
        data: {
          start: startIndex,
          sort: 0,
        },
        success(data) {
          console.log("请求成功：", data);
          // 修改 startIndex 值


          startIndex = data.data.nextIndex;
          //标题布局

          // 遍历数组中每个元素，生成对应的布局 li 结构
          const html = template('temp', { products: data.data.list })

          // 在 ul 内部显示 li 节点
          $(".rongqi").append(html);
          // $('.products').html(html)
        },
      });


    })
    //渲染大额抢券
    $('.uli3').on('click', () => {
      console.log($('.uli3'));
      aj1()
      let startIndex = 0;
      const url = "http://www.xiongmaoyouxuan.com/api/sub_column/174/items";
      // 发起 ajax 请求
      $.ajax({
        url,
        method: "GET",
        data: {
          start: startIndex,
          sort: 0,
        },
        success(data) {
          console.log("请求成功：", data);
          // 修改 startIndex 值


          startIndex = data.data.nextIndex;
          //标题布局

          // 遍历数组中每个元素，生成对应的布局 li 结构
          const html = template('temp', { products: data.data.list })
          // 在 ul 内部显示 li 节点
          $(".rongqi").append(html);
          // $('.products').html(html)
        },

      })
    })

    //渲染女装上新
    $('.uli4').on('click', () => {
      aj2()
      let startIndex = 0;
      const url = "http://www.xiongmaoyouxuan.com/api/column/3183/items";
      // 发起 ajax 请求
      $.ajax({
        url,
        method: "GET",
        data: {
          start: startIndex,
          sort: 0,
        },
        success(data) {
          console.log("请求成功：", data);
          // 修改 startIndex 值


          startIndex = data.data.nextIndex;
          //标题布局

          // 遍历数组中每个元素，生成对应的布局 li 结构
          const html = template('temp', { products: data.data.list })

          // 在 ul 内部显示 li 节点
          $(".rongqi").append(html);
          // $('.products').html(html)
        },
      })
    })
    $('#ul').on('mouseenter', 'li', e => {
      $('.ol').css('display', 'block')
      // console.log(e.currentTarget)
      const ids = String($(e.currentTarget).data('ids')).split(', ')
      console.log('is', ids)
      const array = []

      //遍历id返回数组，每条id发起ajax请求，拼接地址id
      ids.forEach(id => array.push($.ajax({ url: 'http://www.xiongmaoyouxuan.com/api/tab/' + id })))
      console.log(array);
      $.when(
        ...array
      ).done(function () {

        //定义空对象
        let products2 = {},
          products3 = {}
        //判断如果数组长度大于1，提取每个数组数据否则只提取第一个
        if (array.length > 1) {
          products2 = arguments[0][0].data
          products3 = arguments[1][0].data
        } else {
          products2 = arguments[0].data
          // products3 = arguments[0].data
        }
        //渲染列表数据
        const html = template('temp1', { products2, products3 })

        $('.ol').html(html)
      })
    })
  })
})